<!-- 
	* 摘要：用户管理
	* 软件名称：雪克码数据管理系统1.0
	* 文件名: userList.vue
	* 版本：1.0
 -->
<template>
	<div class="sn-common-container ">
		<div class="prcoss-container">
			<header>
				<div class="sn-flex sn-row-center hidden-sm-and-down">
					<el-input v-model="searchValue" placeholder="输入名称筛选" style="width: 200px" clearable
						@keyup.enter.native="currentChange(1)" />
					<el-button class="sn-btn" style="margin-left: 10px" type="primary" icon="el-icon-search"
						@click="currentChange(1)">
						搜索
					</el-button>
					<el-button class="sn-btn" style="margin-left: 10px" type="primary" icon="el-icon-plus"
						@click="addUserDialog = true">
						新建语言
					</el-button>
				</div>
				<div class="hidden-sm-and-up">
					<el-input v-model="searchValue" placeholder="输入名称筛选" style="width: 200px" clearable
						@keyup.enter.native="currentChange(1)" />
					<el-button style="margin-left: 4px" type="primary" class="sn-btn" icon="el-icon-search"
						@click="currentChange(1)">
					</el-button>
					<el-button style="margin-left: 4px" type="primary" class="sn-btn" 
						@click="addUserDialog = true">
						新增
					</el-button>
				</div>
			</header>
			<section>
				<global-table :loading="tableLoading" style="margin-top: 20px;" :pageIndex="currentPage"
					:pageSize="pageSize" :headerData="initData" :data="tabelData" :isFullScreen="false" :operateW="250">
					<template #createdTime="scope">
						{{ $parseTime(scope.row.created_at, '{y}-{m}-{d} {h}:{i}:{s}') }}
					</template>
					<template #operate="scope">
						<el-button type="warning"  icon="el-icon-edit" size="mini"
									@click="openLanguage(scope.row)">修改</el-button>
						<el-button type="primary" class="sn-btn"   icon="el-icon-delete" size="mini"
									@click="delStaffFn(scope.row.id,false)">删除</el-button>
					</template>
				</global-table>
			</section>
			<footer style="margin-top: 20px;">
				<el-pagination @current-change="currentChange" :current-page.sync="currentPage" :page-size="pageSize"
					layout="prev, pager, next, jumper" :pager-count="7" class="sn-pagination" hide-on-single-page
					style="text-align: center;" :total="totalNum" background>
					>
				</el-pagination>
			</footer>
		</div>
		<!-- 新增用户弹窗 -->
		<el-dialog :visible.sync="addUserDialog" class="sn-default-dialog" width="360px" @close="addUserDialogClose()">
			<div class="sn-title" slot="title">编辑语言</div>
			<div v-loading="languageLoading">
				<p style="margin-top: 0;">语言名称：</p>
				<el-input v-model="languageName" placeholder="请输入语言名称" style=""></el-input>
				<p>code:</p>
				<el-input v-model="languageCode" placeholder="请输入语言Code" style=""></el-input>
				<p style="text-align: center;">
					<el-button type="primary" size="medium" class="sn-btn" @click="addUserFn()">保存</el-button>
					<el-button size="medium" @click="addUserDialog = false">取消</el-button>
				</p>
			</div>
		</el-dialog>
	</div>
</template>
  
<script>
import GlobalTable from '@/components/GlobalTable';
import GlobalUpload from '@/components/GlobalUpload';
import { guid } from '@/utils'
export default {
	components: { GlobalTable, GlobalUpload},
	data() {
		return {
			LanguageId:'',
			tableLoading: false,
			tabelData: [],
			initData: [
				{
					label: '名称',
					value: 'name',
					id: guid(),
				},
				{
					label: 'code',
					value: 'code',
					id: guid(), 
					width:100
				},
				{
					label: '创建时间',
					value: 'createdTime',
					id: guid(),
					isCustom: true,
					width: 200
				},
			],
			currentPage: 1,
			pageSize: 10,
			totalNum: 0,
			searchValue: '',
			addUserDialog: false,
			languageName: '',
			languageCode: '',
			languageLoading: false,
		}
	},
	created() {
		this.getDataListFn();
	},
	methods: {
		delStaffFn(id,isDelted) {
			this.$confirm('您将要把该语言删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				this.loading = true;
				try {
					let requestConfig = {
						url:'languages/'+id,
						method:'delete',
					}
					const res = await this.$request(requestConfig);
					this.loading = false;
					if (res.code === 'SUCCESS') {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.getDataListFn();
					} else {
						this.$message.error('删除失败，错误信息：' + res.erroMessage);
					}
				} catch (error) {
					this.loading = false;
					this.erroMessageShow(error);
				}
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		openLanguage(data){
			console.log(data);
			this.languageName = data.name;
			this.languageCode = data.code;
			this.LanguageId = data.id;
			this.addUserDialog = true;
		},
		//新建用户
		async addUserFn() {
			this.languageLoading = true; 
			if(this.languageName === ''){
				this.languageLoading = false;
				this.$message.error('请输入名称！');
				return false;
			}
			if(this.languageCode === ''){
				this.languageLoading = false;
				this.$message.error('请输入code！');
				return false;
			}
			let params = {
				name: this.languageName,
				code: this.languageCode,
			}
			if(this.LanguageId !== ''){
				params.id = this.LanguageId;
			}
			let requestConfig = {
				url:'languages',
				method:'put',
				data:params
			}
			const res = await this.$request(requestConfig);
			this.languageLoading = false;
			if (res.code === 'SUCCESS') {
				this.$message.success('编辑语言成功');
				this.addUserDialog = false;
				this.getDataListFn();
			} else {
				this.$message.error('编辑语言失败，错误信息：' + res.message)
			}
		},
		// 关闭新增用户信息窗口
		addUserDialogClose() {
			this.languageName = '';
			this.languageCode = '';
			this.LanguageId = '';
			this.languageLoading = false;
		},
		//   分页器变化
		currentChange(val) {
			this.currentPage = val;
			this.getDataListFn();
		},
		//获取用户列表
		async getDataListFn() {
			this.tableLoading = true;
			let params = {
				page: this.currentPage,
				size: this.pageSize,
				name: this.searchValue,
			}
			let requestConfig = {
				url:'languages',
				method:'get',
				...params
			}
			const res = await this.$request(requestConfig);
			this.tableLoading = false;
			if (res.code === 'SUCCESS') {
				this.tabelData = res.data.data;
				this.totalNum = res.data.total;
			} else {
				this.tabelData = [];
				this.$message.error('获取语言列表失败，错误信息：' + res.erroMessage);
			}
		},
	}
};
</script>
  
<style lang="scss" scoped>
.prcoss-container {
	box-sizing: border-box;
	padding: 20px;
	background-color: #fff;
}
</style>